import React from 'react';
import { Modal, Form, Input, Select, Dropdown, Button, Checkbox } from 'antd';
import axios from 'axios'

const { Option } = Select;
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};
export default class App extends React.Component {
  state = {
    visible: false,
    infoArr: [],
    defaultName: ''
  };

  componentDidMount() {
    this.findUsers()
  }

  // /api/findUsers

  async findUsers() {
    let data = await axios.get('/api/findUsers')
    let list = data.data
    let arr = []
    list.data.forEach((item, index) => {
      // console.log(item, 'item')
      arr.push({ stuid: item.stuid, username: item.username })
    })
    this.setState({ infoArr: arr }, () => {
      console.log('stuidArr:', this.state.infoArr)
    })
    console.log('查找素有人的数据', list)
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  onFinish = values => {
    console.log(values, 'values-----values')

    let objValue = {
      ...this.props.formInfo, ...values
    }
    console.log('objValue,:', objValue)
    this.props.closeModal(objValue)
  };

  onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  // handleChange(value) {
  //   console.log(`selected ${value}`);
  // }

  handleUserChange = (val) => {
    console.log('select:', val)
    console.log(this.state.infoArr, 'infoArr')
    let filterArr = this.state.infoArr.filter(v => v.stuid == val)
    this.setState({ defaultName: filterArr[0].username }, () => {
      console.log(this.state, 'defaultName')
    })
  }

  // handleTheory = (e) => {
  //   console.log(e.target.value, '理论')
  // }

  // handleSkill = (e) => {
  //   console.log(e.target.value, '技能')
  // }

  componentDidMount() {
    // console.log(this.refs, 'refs')
    // console.log('this.props.formInfo', this.props.formInfo)
    // this.myform.setFieldsValue(this.props.formInfo)
  }
  componentWillUpdate() {

  }

  handleOk = e => {
    // console.log(e);
    // this.setState({
    //   visible: false,
    // });
    this.refs.myform.submit()
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  render() {
    const { infoArr, defaultName } = this.state;
    const { visible, formInfo } = this.props;
    console.log('我是自组件', formInfo)
    return (
      // this.refs.myform
      <div>
        <Modal
          title="Basic Modal"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          {/* stuid */}
          <Form
            ref="myform"
            {...layout}
            name="basic"
            initialValues={{ remember: true, ...formInfo }}
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
          >
            {!formInfo ? (
              <>
                <Form.Item
                  label="学号"
                  name="stuid"
                >
                  <Select style={{ width: 220 }} onChange={this.handleUserChange}>
                    {
                      infoArr.map((item, index) => {
                        return <Option key={index} value={item.stuid}>{item.stuid}</Option>
                      })
                    }
                  </Select>
                </Form.Item>
                <div> {defaultName}</div>
              </>) : <div> {formInfo.username} </div>
            }

            {/*  */}
            <Form.Item label="理论" name="theory">
              <Input />
            </Form.Item>
            {/*  */}
            <Form.Item label="技能" name="skill" >
              <Input />
            </Form.Item>
            {/* <Button type="primary" htmlType="submit">
              提交数据
              </Button> */}
          </Form>
        </Modal>
      </div>
    );
  }
}
